<template>
  <div>
    <el-dialog :title="curid==''?'添加菜单':'修改菜单'" :visible.sync="obj.isshow">
      <el-form :model="form">
        <el-form-item label="上级分类" :label-width="formLabelWidth">
          <el-select v-model="form.pid" placeholder="请选择所属角色">
            <el-option label="顶级分类" value="0">顶级分类</el-option>
            <el-option
              :key="item.id"
              v-for="item in catesArr ? catesArr : []"
              :label="item.catename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="form.catename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图片" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :auto-upload="false"
            :on-change="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <!-- 
            active-value: switch启用时的值
            inactive-value: switch禁用时的值
          -->
          <el-switch
            :active-value="1"
            :inactive-value="2"
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="canle">取 消</el-button>
        <el-button type="primary" v-if="curid == ''" @click="addCate"
          >添加</el-button
        >
        <el-button type="primary" v-else @click="updatCate">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { successMsg, failedMsg } from "../../tools/tools.js";
import { cateAdd, cateInfo ,cateEdit} from "../../request/api.js";
export default {
  props: ["obj", "catesArr"],
  methods: {
    canle(){
      this.$emit('canle')
      this.empty()
    },
    updatCate(){
      let obj ={
        id:this.curid,
        ...this.form
      }
      cateEdit(obj,true).then(d=>{
        if(d.data.code == 200){
          this.$emit('updataList')
          successMsg(d.data.msg)
          this.empty()
        }
      }).catch(e=>{
        console.log(e);
      })
    },
    getCateInfo(id) {
      this.curid = id;
      cateInfo({ id })
        .then((d) => {
          if (d.data.code == 200) {
            this.form = d.data.list;
            //将要上传的图片文件转换成图片路径并展示在界面上
            this.imageUrl = d.data.list.img != ''?'http://localhost:3000'+d.data.list.img:d.data.list.img;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    addCate() {
      console.log(this.form);
      let flg = false;
      if (this.form.img != "") {
        //用户选择了要上传的文件
        flg = true;
      }
      cateAdd(this.form, flg).then((d) => {
        console.log(d);
        if (d.data.code == 200) {
          successMsg(d.data.msg);
          this.empty();
          this.$emit("addCate");
        }else{
          failedMsg(d.data.msg)
        }
      });
    },
    beforeAvatarUpload(obj) {
      let fileObj = obj.raw;
      let { size, type } = fileObj;
      let typeArr = ["image/gif", "image/png", "image/jpg", "image/jpeg"];
      if (typeArr.indexOf(type) == -1) {
        failedMsg("只能上传.gif、.png、.jpg或.jpeg格式的图片");
        return false;
      }
      if (size > 2 * 1024 * 1024) {
        //文件大小不能超过2M
        failedMsg("文件大小不能超过2M");
        return false;
      }
      //将要上传的图片文件转换成图片路径并展示在界面上
      this.imageUrl = URL.createObjectURL(fileObj);
      //将用户要上传的图片文件数据赋值给this.form.img，这样当单击了"添加"按钮时才能要用户选择图片文件上传到服务器上
      this.form.img = fileObj;
      return ;
    },
    //清空表单数据
    empty() {
      this.form = {
        pid: "",
        catename: "",
        img: "",
        status: 1,
      };
      this.imageUrl = "";
      this.curid =""
    },
  },
  data() {
    return {
      curid: "",
      form: {
        pid: "",
        catename: "",
        img: "",
        status: 1,
      },
      formLabelWidth: "120px",
      imageUrl: "", //文件路径
    };
  },
};
</script>

<style scoped>
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>